<p>
  general-all-employee works!
</p>

<div>
  <p-table #dtl [columns]="cols1" [value]="outRecords" [paginator]="true" [rows]="10">
    <ng-template pTemplate="caption">
      所有员工的外出记录(已通过的)
      <div style="text-align: right">
        <i class="fa fa-search" style="margin: 20px 4px 0 0"></i>
        <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dtl.filterGlobal($event.target.value, 'contains')" style="width: auto">
      </div>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns" [pSortableColumn]="col.field">
          {{col.header}}
          <p-sortIcon [field]="col.field"></p-sortIcon>
        </th>
      </tr>
      <tr>
        <th *ngFor="let col of columns" [ngSwitch]="col.field">
          <input *ngSwitchCase="'admin_id'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
          <input *ngSwitchCase="'satrt_time'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
          <input *ngSwitchCase="'end_time'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
          <input *ngSwitchCase="'days'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
          <input *ngSwitchCase="'reason'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr [pSelectableRow]="rowData">
        <td *ngFor="let col of columns">
          {{rowData[col.field]}}
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>

<br>
<br>

<div>
  <p-table #dtl [columns]="cols2" [value]="leaveRecords" [paginator]="true" [rows]="10">
    <ng-template pTemplate="caption">
      所有员工的请假记录(已通过的)
      <div style="text-align: right">
        <i class="fa fa-search" style="margin: 20px 4px 0 0"></i>
        <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dtl.filterGlobal($event.target.value, 'contains')" style="width: auto">
      </div>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns" [pSortableColumn]="col.field">
          {{col.header}}
          <p-sortIcon [field]="col.field"></p-sortIcon>
        </th>
      </tr>
      <tr>
        <th *ngFor="let col of columns" [ngSwitch]="col.field">
          <input *ngSwitchCase="'admin_id'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
          <input *ngSwitchCase="'satrt_time'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
          <input *ngSwitchCase="'end_time'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
          <input *ngSwitchCase="'days'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
          <input *ngSwitchCase="'reason'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
          <input *ngSwitchCase="'type_name'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr [pSelectableRow]="rowData">
        <td *ngFor="let col of columns">
          {{rowData[col.field]}}
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>
